I have a new Drupal 6 module that brings modal dialog to the admin interface. You can check out a screencast at:
http://www.citris-uc.org/drupal_modal_dialogs
The project itself is at:
http://drupal.org/project/popups
Some things of note:
* The project currently includes rules for about 10 admin pages.
* It includes a hook_popups so other modules can define rules for their pages or forms.
* It also includes a simple generic API for creating popup dialogs (ie: other modules can call Drupal.popups.message( 'Hello World' ) ).
* I have figured out how to get Drupal to serve any page without the applying the page theme, which really cuts down on the traffic and Ajax parsing.
* The appearance of the popups can be modified by rules in your theme's style.css.
* I'd love help testing and polishing. I really want to get functionality like this built into Drupal 7.
The announcement on my site didn't seem to get picked up by Drupal Planet, and it is already a little out of date (most of the limitations listed have been fixed in the latest beta).
Comments
Cool! This could be very
Cool! This could be very useful. However it's important not to apply the popups in places where it breaks user-flow. Some of the places you have applied it in your demo would do this. I highly recommend this excellent article on A List Apart titled "Never Use a Warning when you mean Undo" for more detail on why.
Obviously the video is just a demo though. The idea is great and I think it could be useful in many places in contrib and core -- although I can't think of any examples right now.
It's also important to let the link fall through to the traditional method if javascript is not enabled.
Bevan/
Bevan/
Could you be more specific?
Could you be more specific about where you think the popups break user flow? The ALA article you point to is about undo, which is a great feature to have, but is much more ambitious that what I am proposing (you might want to check out Chad's work on a DeleteAPI) . What you might have missed about the screencast, is that what is being shown in the popup is exactly what you would see if you went to the next page. It's the same functionality, just keeping your current context intact.
With javascript off, the links take you to the next page, just like they would without the module installed.
I hope jquery.ui will be
I hope jquery.ui will be available in core 7 once its stable
is this thickbox? or just a thickbox clone? im not a huge fan of how thickbox was written I think jquery.ui would be a better solution if the dialogs will suffice ( have not looked into this )
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
It is neither thickbox, nor
It is neither thickbox, nor a thickbox clone. It's some custom jQuery code I put together to make popups, which is totally not rocket science. Please see my reply below re: my feelings about the current state of jQuery UI. It was not ready for a 1.0 release. We will just have to see what the future brings.
looks worse than thickbox
looks worse than thickbox IMO, and thickbox is pretty bad, however I definatly commend effort towards this kind of usability enhancment. I agree though UI was in a pretty week state I have been staying away from it for now too
vision media
350designs
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
The appearance is themable.
The appearance is themable.
thickbox is themeable
the whole point of thickbox was (and is) just to provide the functionality, and you can then style it however you choose. There is a template and CSS file in the thickbox module that let's you customize colors, layouts, etc. to match your own site. As the author of this post has said, his module will do the same.
Nice
This is indeed a piece of functionality that's needed in places.
Did you consider building off of the dialog plugin in jQuery UI? If so, why did you decide against this?
For loading only the content of the page, see the Page Array module, http://drupal.org/project/pagearray. See the Dynamicload module (in Javascript Tools head) for a sample implementation using Page Array.
It's good to see the (newly in core) forms plugin in use. See AJAX Submit (part of Javascript Tools) for server-side handling of e.g. form validation issues in AJAX form submission. I'd like to see AJAX form submission stay in a generic module, as there is a set of issues we'll need to address independent of the specific UI. Might you be interested in rolling some of this into a 6.x upgrade of AJAX Submit?
jQuery UI, etc
Have you tried out the jQuery UI dialog? The version released in 1.0 was seriously lame, and, more importantly, not modal. Hopefully it will improve with the 1.1 release, but I am not willing to wait. Also, it seems to me that the lesson of drag-and-drop in Drupal 6 is that the Drupal committers would rather have focused, Drupal specific js than try and accommodate more general libraries.
Your pagearray module is very slick. I didn't think it would be possible in Drupal 5. It is much easier to pull off this in D6, with the introduction of menu_execute_active_handler(). The part that was tricky was getting the response page after submitting the form to not be themed.
I will check out Ajax submit, but I have general doubts about the Javascript Tool model of putting so many module in one project.
Breaking up jstools
Yes, I'm breaking them into separate projects for D6.
And looking for maintainers and co-maintainers
for those projects. Might you be interested in AJAX Submit?
Well, since I haven't used
Well, since I haven't used it, and don't yet know what it does, I am probably not at the head of the line :) How is it different from the ajaxSubmit call that comes with jquery.forms.js?
jQ
i might be interested in helping with that. also, check out the jQ helper module as a way of assembling jquery plugins. wouldn't hurt to do that with other javascript tools.
Aaron Winborn
Advomatic, Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
modal with overlay
I'm looking into modal dialogs for Drupal 5 site and found that the Dialog demo has a "modal with overlay" option. It seems to have been added to jQuery UI in February.
Thanks for putting this
Thanks for putting this together! I've viewed the video but not yet installed the module. I worked on a similar idea for producing a simplified (not themed) node form in a thickbox popup. The idea was to simplify the workflow for nodereference fields by allowing the user to submit a new node in the popup window and have the nodereference field automatically populate in the parent window.
I'll take a look that this module. This kind of input can signifigantly improve the UI. Great work.
CCK!
Yeah, I can't wait for a Drupal 6 version of CCK so I can start testing out approaches. The one bit that is tricky about the use case you describe, is not losing work in the CCK form when the popup is submitted. Right now the workflow is to submit the form in the popup and then reload the entire originating page/form to show the new results. To do what you describe, we'll need to replace just part of the originating form, which is doable (and something I am interested in doing).
Tao, you can grab CCK HEAD
Tao, you can grab CCK HEAD already. It's not officially ready yet, and has its share of bugs, but it is fully functionnal.
I'm also really interested in getting modals workflows in drupal.
I hope you're aiming at core for D7 !
Drat
I pulled down a copy of CCK head and have been playing with it to good effect. But I have been playing with subpage updates, and it gets nasty quick. I actually got single row table updates working, but it seems like it is going to be a nightmare trying to apply the tabledrag behavior to a single new row of a table. It is very much designed to work on the entire table as once. Drat.
Style
What is your default styling for the dialog right now? I would be interested in creating a generic one that should integrate well with most themes, it always hurts me a little inside when WYSIWYG's etc completely stick out from your design
vision media
350designs
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
The default style is defined
The default style is defined in a popups.css file included with the module. I am focused on functionality right now, but would be thrilled if someone wanted to redo the default style to play nicer with garland.
that might be a fun project.
that might be a fun project. i make take a stab at it when i try out the module.
really cool would be to use garland's color module bit to make rounded corners the same colors as the theme. just saying... ;)
Aaron Winborn
Advomatic, Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
Ideally I would like to use
Ideally I would like to use alpha transparent PNG's but I suppose with old browsers that is not a great move if/when this module is in core, I will think about it, I'mnot a fan of the color module, just seems really hackish to me but I agree that would be pretty cool to just swap colors quickly like that
vision media
350designs
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Transparent PNG's
For the first pass, you might as well just use alpha PNG's. I have been focusing by development on modern browsers, and there is probably quite a bit of other work that will need to be done to get it to play nicely with ie6 and it's ilk.
For transparent PNGs, could
For transparent PNGs, could probably just use the jQuery pngfix (which has a module).
Good to know about that
Good to know about that module/plug-in. Looks slick.
You might want to check out
You might want to check out alternative suggestions before implementing a js fix for this: http://www.civicactions.com/blog/png_images_transparency_ie6_answers_to_...
Bevan/
Bevan/
I think it would be kind of
I think it would be kind of silly to require pngfix.module for this module IMO
vision media
350designs
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Sounds good, Garland
Sounds good, Garland defaults seem to go deecently well with most themes, atleast with a few color adjustments, I have a few ideas though, i dont want to go overboard and make it stand out to much either, I will post something asap
vision media
350designs
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
This and the CCK demo are
This and the CCK demo are really nice examples! Thanks for taking the initiative with this.
I was wondering why you put the (drupal) message into a dialog vs. adding it back into the page?
Good question.
My two reasons for putting the message in a popup are:
1) Unclear where to put it. The obvious place is the standard message area, but it might be scrolled out of view. That would be very confusing to have something fail, and to have to think to scroll up to the top of the page to find out why.
2) Accessibility. I know everyone think of Accessibility and Ajax as incompatible, but it turns out modern screen readers can handle it. But you have to be careful to keep the flow of information clear. This aspect needs more testing and more work (I know I need to prevent the tab/focus flow from moving out of the dialog, and I might need to do more to signal the screen reader that the elements behind the overlay are unavailable).
I would like to add a setting to select different ways of handling the messages. I have been thinking about offering a timed fade out - where the message starts in an opaque overlay, and then fades out and reappears in the normal message area (a complete accessibility no-no, but some people might prefer it). Actually, thinking this through as I type it, it would probably be a good idea to always put the message into the normal message area, no mater how else we handle it.
I am also thinking about having clicks on the normal, semi-transparent overlay trigger a cancel/close. I wonder if folk have done usability studies on that one.
Right, there is also the
Right, there is also the fact that if I want to put the messages into the "standard" place, it is a pain to target. In garland, the message are the sixth of nine possible children of the div with the class="left-corner", eight of which might or might not be there. And, of course, the messages don't have a single root element. In drupal_set_message(msg, type), each distinct type generates a separate div.
I can put together the logic to handle garland, but it's going to be tricky to deal with multiple themes.
Hopefully in Drupal 7 to get some more stable xhtml to target. Maybe something like:
<div id="messages" <?php if (!empty($messages)):?> style="display:none" <?php endif;?><?php print $messages; ?>
</div>
Heres another new one that
Heres another new one that just came out:
http://nyromodal.nyrodev.com
vision media
350designs
Print Huge Edmonton Printing Services
Design Inspiration Gallery
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Problem with popups module
Hi all,
I'm having a problem with the popups module for D6 that I can't seem to find any information about. I've created a custom module in which I've implemented hook_form_alter(). From within the hook_form_alter() I call popups_add_popups() and then print a link of class popups-form:
function wis_form_alter(&$form, $form_state, $form_id){
popups_add_popups();
print l("Create a story.", 'node/add/story', array('attributes' => array('class' => 'popups-form'))) ."
";
}
It works fine when displaying a static page as a dialog (ie linking to 'node/add'), but when I link to a node_form it just shows the 'loading' animation forever and no dialog is ever displayed. Eventually I have to hit the back button on my browser. I've looked around for other people having the same problem and haven't found anyone else in the same boat yet.
This is my first time attempting to use this module, so maybe I missed something? Any help would be much appreciated.
Thanks!
axlroach
Fetch data that was submitted in pop up
Hi,
hey i wanna know how can i get the data that was submitted in the pop-up on the parent window.
I dont wanna leave that page and i want the the created content "nid" should be available on the parent widow so that i can manipulate it there...
thanks
What is the pop-up filtering out of the page?
I am using the popups module to display a view that is printing a facebook like plugin as well as other fields. Everything prints except the fb plugin, which makes me think that the popup has stripped neccessary java or scripts needed to display the fb plugin. Any thoughts on this?
Apparently we are having the
Apparently we are having the same problem. From IE9 under, some js files are not running inside the popups. It works fine in all other browsers in our case.